<template>
  <div class="permission_list-page flexC">
    <div class="permission-page flexC" style="margin-bottom: 20px;">
      <div class="pageHead flexC">
        <p>用户查询</p>
      </div>
      <div class="pageHead flexC">
        <Form ref="searchForm" :model="searchForm" inline :label-width="80">
          <FormItem label="权限名称" prop="name">
            <Input
                type="text"
                v-model="searchForm.name"
                placeholder="请输入权限名称"
                clearable
                style="width: 200px"
            />
          </FormItem>

          <FormItem label="目录/功能" prop="method">
            <Input
                type="text"
                v-model="searchForm.method"
                placeholder="请输入目录/功能"
                clearable
                style="width: 200px"
            />
          </FormItem>

          <FormItem style="margin-left: -35px" class="br">
            <!--            <Button @click="handleSearch" type="primary" icon="ios-search" style="margin-right: 10px;">搜索</Button>-->
            <Button type="primary" icon="ios-search" style="margin-right: 10px;" @click="handleSearch">搜索</Button>
            <!--            <Button @click="handleReset">重置</Button>-->
            <Button @click="handleReset('searchForm')">重置</Button>
          </FormItem>
        </Form>
      </div>
    </div>



   <div class="pageHead flexC" style="padding-left: 0px;">

      <div class="pageHead flexC">
        <div style="display: flex;justify-content: space-between">
          <p>结果列表</p>
          <div>
            <Icon type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
            <i style="margin-right: 15px;">正常</i>
            <Icon type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
            <i style="margin-right: 15px;">冻结</i>
            <template>
              <Button type="primary" size="small" @click="crpermission=true">添加</Button>
              <Modal
              width="650"
              v-model="crpermission"
              title="添加权限"
              :mask-closable="false"
      >
            <Form ref="permissionmodel" :model="permissionmodel" :rules="ruleValidate">
              <div style="margin-left: 10px;">
                <FormItem label="菜单/功能名称" prop="name">
                  <Input
                      type="text"
                      v-model="permissionmodel.name"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div>
                <FormItem label="目录/功能CODE" prop="method">
                  <Input
                      type="text"
                      v-model="permissionmodel.method"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div style="margin-left: 55px;">
                <FormItem label="权限类型" prop="types">
                  <RadioGroup v-model="permissionmodel.types">
                      <Radio label="菜单"></Radio>
                      <Radio label="API" style="margin-left: 20px;"></Radio>
                  </RadioGroup>
                </FormItem>
              </div>

              <div style="margin-left: 55px;">
                <FormItem label="所属目录" prop="parent">
                      <treeselect
                          v-model="permissionmodel.parent"
                          :options="options"
                          :searchable="false"
                          :normalizer="normalizer"
                          :clearOnSelect="false"
                          :multiple="false"
                          placeholder="请选择"
                          style="width: 455px;display: -webkit-flex;display: flex;"
                      />
                </FormItem>
              </div>

              <div style="margin-left: 55px;">
                <FormItem label="激活/冻结" prop="is_delete">
                  <RadioGroup v-model="permissionmodel.is_delete">
                      <Radio :label=0 type="false">激活</Radio>
                      <Radio :label=1 type="true" style="margin-left: 15px;">冻结</Radio>
                  </RadioGroup>
                </FormItem>
              </div>

              <div style="margin-left: 80px;">
                <FormItem label="排序" prop="sort">
                  <Input
                      type="text"
                      v-model="permissionmodel.sort"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div style="margin-left: 80px;">
                <FormItem label="备注" prop="desc">
                  <Input
                      type="textarea"
                      v-model="permissionmodel.desc"
                      clearable
                      style="width: 458px"
                      rows="5"
                  />
                </FormItem>
              </div>

            </Form>

             <div slot="footer">
              <Button @click="crpermission=false">取消</Button>
             <Button @click="crpermissions" type="primary">确定</Button>
            </div>
          </Modal>
            </template>
          </div>
        </div>
      </div>

      <div class="pageContent flexC">
        <TreeTable
            :data="data"
            :columns="columns"
            :selectable="false"
            :expand-type="false"
            border
        >
          <template slot-scope="{ row }" slot="is_delete">
            <Icon v-if="row.is_delete == false" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
            <Icon v-if="row.is_delete == true" type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
          </template>

          <template slot-scope="{ row }" slot="operation">
            <Button type="text" size="small" @click="updatapermission(row)" style="color: #2d8cf0">编辑</Button>
          </template>
        </TreeTable>

<!--        编辑modal-->
        <Modal
              width="650"
              v-model="uppermission"
              title="编辑权限"
              :mask-closable="false"
      >
            <Form ref="uppermissionmodel" :model="uppermissionmodel" :rules="ruleValidate">
              <div style="margin-left: 10px;">
                <FormItem label="菜单/功能名称" prop="name">
                  <Input
                      type="text"
                      v-model="uppermissionmodel.name"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div>
                <FormItem label="目录/功能CODE" prop="method">
                  <Input
                      type="text"
                      v-model="uppermissionmodel.method"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div style="margin-left: 55px;">
                <FormItem label="权限类型" prop="types">
                  <RadioGroup v-model="uppermissionmodel.types">
                      <Radio label="菜单"></Radio>
                      <Radio label="API" style="margin-left: 20px;"></Radio>
                  </RadioGroup>
                </FormItem>
              </div>

              <div style="margin-left: 55px;">
                <FormItem label="所属目录" prop="parent">
                      <treeselect
                          v-model="uppermissionmodel.parent"
                          :options="options"
                          :searchable="false"
                          :normalizer="normalizer"
                          :clearOnSelect="false"
                          :multiple="false"
                          placeholder="请选择"
                          style="width: 455px;display: -webkit-flex;display: flex;"
                      />
                </FormItem>
              </div>

              <div style="margin-left: 55px;">
                <FormItem label="激活/冻结" prop="is_delete">
                  <RadioGroup v-model="uppermissionmodel.is_delete">
                      <Radio :label=0 type="false">激活</Radio>
                      <Radio :label=1 type="true" style="margin-left: 15px;">冻结</Radio>
                  </RadioGroup>
                </FormItem>
              </div>

              <div style="margin-left: 80px;">
                <FormItem label="排序" prop="sort">
                  <Input
                      type="text"
                      v-model="uppermissionmodel.sort"
                      clearable
                      style="width: 458px"
                  />
                </FormItem>
              </div>

              <div style="margin-left: 80px;">
                <FormItem label="备注" prop="desc">
                  <Input
                      type="textarea"
                      v-model="uppermissionmodel.desc"
                      clearable
                      style="width: 458px"
                      rows="5"
                  />
                </FormItem>
              </div>

            </Form>

             <div slot="footer">
              <Button @click="uppermission=false">取消</Button>
             <Button @click="uppermissions" type="primary">修改</Button>
            </div>
          </Modal>
      </div>
    </div>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { permissionslist, crpermissions, uppermissions } from '../../api/api'
import Vue from 'vue'
import TreeTable from 'tree-table-vue'
Vue.use(TreeTable)


export default {
  name: "permission",
  components: { Treeselect },

  created() {
    this.permissionlist();
  },

  methods: {
    handleSearch() {
      permissionslist(this.searchForm).then(res =>{
        let data = res.data
        data = data.map((item) => {
            return {
              id: item.id,
              name: item.name,
              parent: item.parent,
              desc: item.desc,
              is_delete: item.is_delete,
              sort: item.sort,
              method: item.method,
              types: item.types,
              create_time: item.create_time,
              expand: true,
              selected: true,
            }
          })
        let arrayToTree = require("array-to-tree");
          this.data = arrayToTree(data, {
            parentProperty: "parent",
            childrenProperty: "children",
            customID: "id",
          });
          this.options = this.data
      })
    },

    handleReset(name){
      this.permissionlist()
      this.$refs[name].resetFields();
    },

    permissionlist() {
      permissionslist().then(res => {
        let data = res.data
        data = data.map((item) => {
            return {
              id: item.id,
              name: item.name,
              parent: item.parent,
              desc: item.desc,
              is_delete: item.is_delete,
              sort: item.sort,
              method: item.method,
              types: item.types,
              create_time: item.create_time,
              expand: true,
              selected: true,
            }
          })

        let arrayToTree = require("array-to-tree");
          this.data = arrayToTree(data, {
            parentProperty: "parent",
            childrenProperty: "children",
            customID: "id",
          });
          this.options = this.data
        console.log(this.options)
      })
    },

    crpermissions() {
      crpermissions(this.permissionmodel).then(res =>{
        this.crpermission = false
        this.$Message.success(res.msg)
        this.permissionlist()
      })
    },

    updatapermission(row) {
      this.permissionID = row.id
      this.uppermissionmodel.name= row.name,
      this.uppermissionmodel.method= row.method,
      this.uppermissionmodel.types= row.types,
      this.uppermissionmodel.parent= row.parent,
      this.uppermissionmodel.is_delete= row.is_delete ===false ? 0 : 1,
      this.uppermissionmodel.sort= row.sort,
      this.uppermissionmodel.desc= row.desc,
      this.uppermission = true
    },

    uppermissions() {
      uppermissions(this.uppermissionmodel,this.permissionID).then(res => {
        this.uppermission = false
        this.permissionlist()
        this.$Message.success(res.msg)
      })
    },
  },

  data() {
    return {
      permissionID:'',
      ruleValidate: {
        name: [
          {required: true, message: '请输入菜单/功能名称', trigger: 'blur,change'}
        ],
        method: [
          {required: true, message: '请输入目录名称/功能权限CODE', trigger: 'blur,change'},
        ],
      },
      permissionmodel: {
        name: '',
        method: '',
        types: '',
        parent: null,
        is_delete: false,
        sort: '',
        desc: '',
        creator: sessionStorage.getItem('user_id'),
        modifier: sessionStorage.getItem('user_id')
      },
      uppermissionmodel: {
        name: '',
        method: '',
        types: '',
        parent: null,
        is_delete: false,
        sort: '',
        desc: '',
        creator: sessionStorage.getItem('user_id'),
        modifier: sessionStorage.getItem('user_id')
      },
      normalizer (node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      data:[],
      crpermission: false,
      uppermission: false,
      crontabmodel:{},
      options:[],
      searchForm:{
        name:'',
        method:''
      },
      columns: [
        {
          title: "名称",
          key: "name",
          align: "left",
          headerAlign: "center",
          width: 208,
        },
        {
          title: "权限类型",
          key: "types",
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 200,
        },
        {
          title: "目录名称/功能权限CODE",
          key: "method",
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 200,
        },
        {
          title: "排序",
          key: "sort",
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 150,
        },
        {
          title: "创建时间",
          key: "create_time",
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 172,
        },
        {
          title: "备注",
          key: "desc",
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 309,
        },
        {
          title: "状态",
          key: "is_delete",
          type: "template",
          template: 'is_delete',
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 150,
        },
        {
          title: "操作",
          type: "template",
          template: 'operation',
          width: 180,
          align: "center",
          headerAlign: "center",
          fixed: "right",
        },
      ]
    }
  },
}
</script>

<style scoped>

</style>
